<template>
	<div class="wraper-invite-list" :class="{iphoneX:isIphoneX,iphone:isIphone}">
		<div class="line"></div>
		<div class="nav-bar">
			<div class="arrow" @click="goBack"></div>
			<div class="center">{{account}}</div>
			<div class="right"></div>
		</div>
		<div class="tab">
			<!-- 出入金 -->
			<span :class="{on:pageState===1}" @click="changeState(1)">{{$t('invite-key55')}}</span>
			<!-- 交易管理 -->
			<span :class="{on:pageState===2}" @click="changeState(2)">{{$t('invite-key56')}}</span>
			<!-- <b v-if="pageState==2" :class="{on:showTypes}" @click="showTypes=true;">{{nav0.find(item => item.id === types).name}}</b> -->
			<b v-if="pageState==2" :class="{on:showTypes}">{{nav0.find(item => item.id === types).name}}</b>
		</div>
		<ul class="menu" v-if="pageState===1">
			<!-- 时间 -->
			<li>{{$t('invite-key57')}}</li>
			<li>
				<van-dropdown-menu>
					<van-dropdown-item v-model="navSelect" :options="navList" />
				</van-dropdown-menu>
			</li>
			<!-- 币种 -->
			<li>{{$t('invite-key58')}}</li>
			<!-- 金额 -->
			<li>{{$t('invite-key59')}}</li>
		</ul>
		<ul class="nav" v-if="pageState===2">
			<li v-for="item in nav" :key="item.id" :class="{on:item.selected}" @click="navSelectId=item.id;">{{item.name}}</li>
		</ul>
		<ul class="nav2" v-if="pageState===2 && nav.find(item => item.selected).id===3">
			<!-- 日期 -->
			<span>{{$t('invite-key60')}}</span>
			<div class="input" @click="selectTime=true;source=1">{{startTime}}</div>
			<span>—</span>
			<div class="input" @click="selectTime=true;source=2">{{endTime}}</div>
		</ul>
		<div class="content" :class="{noList:list.length===0,nav3:pageState===2 && nav.find(item => item.selected).id===3}">
			<van-list
				v-model="loading"
  				:finished="finished"
  				:error.sync="loadError"
  				:offset="offset"
  				:error-text="$t('reloadText')"
  				:loading-text="$t('loading')"
  				:finished-text="$t('finishedText')"
  				@load="load"
			>
				<div class="item" v-if="pageState===1 && list.length" v-for="item in list" :key="item.create_time">
					<li>{{item.showTime}}</li>
					<li>{{showText(item.type)}}</li>
					<li>{{item.currency_id}}</li>
					<li :class="{red:Number(item.orderusdt_e2) > 0}">{{item.amount}}</li>
				</div>
				<div class="ele" v-if="pageState===2 && list.length" v-for="item in list">
					<div class="top">
						<div class="left">
							{{item.currency_id}}/USDT
							<span class="up" v-if="item.bs_flag==2"> {{$t('invite-key61',{lever:item.lever})}}</span>
							<span class="down" v-if="item.bs_flag==1">{{$t('invite-key62',{lever:item.lever})}}</span>
							<span>{{nav0.find(item => item.id === types).name}}</span>
						</div>
						<div class="right" v-if="navSelectId===3">
							<span>{{item.close_type=='7'?item.open_amount_e2:item.pl_e2}} USDT</span>
						</div>
					</div>
					<div class="bottom">
						<li>
							<p>{{item.open_price_e2}}</p>
							<!-- 开仓价 -->
							<p>{{$t('invite-key63')}}(USDT)</p>
						</li>
						<li>
							<p>{{item.close_price_e2}}</p>
							<!-- 平仓价 -->
							<p>{{$t('invite-key64')}}(USDT)</p>
						</li>
						<li>
							<p>{{item.open_fee_e2}}</p>
							<!-- 手续费 -->
							<p>{{$t('invite-key65')}}(USDT)</p>
						</li>
					</div>
				</div>
				<!-- 暂无记录 -->
				<div class="empty" v-if="list.length===0 && finished">
	    			<p class="img"><img src="../../static/images/empty.png"></p>
	    			<p class="desc">{{$t('noData')}}</p>
	    		</div>
			</van-list>
		</div>
		<!-- 选择日期 -->
		<van-popup @open="popupOpen" v-model="selectTime" position="bottom">
			<van-picker show-toolbar :confirm-button-text="$t('confirm')" :cancel-button-text="$t('cancel')" @change="change" :columns="timeList" @confirm="confirm" @cancel="selectTime=false" />
		</van-popup>
		<!-- 币本位/差价选择 -->
		<van-action-sheet 
			class="iconBox" 
			:class="{isIphoneX:isIphoneX}"
			v-model="showTypes" 
			:actions="nav0" 
			:cancel-text="$t('cancel')" 
			@select="selectIcon" 
		/>
	</div>
</template>
<script src="./inTrade.js"></script>
<style scoped lang="scss">
	@import './inTrade.scss';
</style>
<style>
	.content.noList .van-list__finished-text{
		display: none;
	}
</style>
<style>
	.van-dropdown-item__option{
		/*padding-right: 0;*/
	}
	.van-cell::after{
		right: 0;
		border-bottom: 1px solid #D3DCE6;
	}
	.content.noList .van-list__finished-text{
		display: none;
	}
</style>